<?xml version="1.0" encoding="UTF-8"?>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="./css/template.css" />
        <link type="text/css" rel="stylesheet" href="./css/SyntaxHighlighter.css" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Thinlet &amp; SwiXML</title>
        <meta name="author" />
        <script language="javascript" src="./js/shInit.js" />
        <script language="javascript" src="./js/shCore.js" />
        <script language="javascript" src="./js/shBrushCpp.js" />
        <script language="javascript" src="./js/shBrushCSharp.js" />
        <script language="javascript" src="./js/shBrushCss.js" />
        <script language="javascript" src="./js/shBrushDelphi.js" />
        <script language="javascript" src="./js/shBrushJava.js" />
        <script language="javascript" src="./js/shBrushJScript.js" />
        <script language="javascript" src="./js/shBrushPhp.js" />
        <script language="javascript" src="./js/shBrushPython.js" />
        <script language="javascript" src="./js/shBrushRuby.js" />
        <script language="javascript" src="./js/shBrushSql.js" />
        <script language="javascript" src="./js/shBrushVb.js" />
        <script language="javascript" src="./js/shBrushXml.js" />
        <keywords>Java, XML, SwiXML, Thinlet</keywords>
    </head>
    <body leftmargin="0" topmargin="0" bottommargin="0" rightmargin="0">
        <div class="chapter">
            <p>Alexandre FILLATRE</p>
        </div>
        <div class="chapter">
            <h2>Introduction</h2>
            <p>Cet article a pour but de vous présenter les interfaces graphiques en java générées grâce à du code XML. A la fin de ce dossier, vous connaîtrez les différentes technologies, aujourd'hui en développement, permettant de développer une interface graphique java en XML.</p>
            <p>Après quelques généralités, nous verrons dans ce dossier les technologies suivantes ainsi que des exemples pour chacune.</p>
            <p />
            <ul>
                <li>Thinlet</li>
                <li>SwiXml</li>
            </ul>
            <p>Seules ces deux technologies sont pour le moment assez avancées pour pouvoir en parler, mais bien d'autres comme XUL, XULUX, Jelly, et SwingML existent, en cours d'élaboration.</p>
        </div>
        <div class="chapter">
            <h2>1. Généralités</h2>
            <p>Les technologies comme Thinlet, SwiXml ainsi que XUL, XULUX, Jelly, et SwingML ont été mises en développement suite aux besoins émis par la communauté Java de pouvoir bénéficier d'une plateforme de développement de représentation des éléments graphiques. Mais c'est aussi pour essayer de séparer plus clairement les parties graphiques et les parties logiques (code) lors du développement d'une application Java.</p>
            <div class="subChapter">
                <h3>1.1. Principes Généraux</h3>
                <p>
                    Les principes généraux de ces technologies sont de décrire chaque composant et chacune de leurs propriétés dans un fichier XML (sa taille, sa place, sa couleur...).
					Les éléments logiques lui étant liés, tel que les gestionnaires d'événements, étant placés dans le fichier java appelant le fichier XML.Cette approche est avantageuse pour au moins deux raisons.
                    <br />
                    Premièrement, les développeurs, plus à même de faire des algorithmes de logiques ou la gestion interne au programme, n'ont pas à perdre de temps à chercher parmi des centaines de lignes de code d'interface graphique pour trouver la partie de code qui les intéresse.
					De même, les développeurs de l'interface graphique n'ont pas à chercher parmi des centaines de lignes pour changer la largeur d'un bouton. Ou, plus idéalement, ces derniers pourraient même développer leur interface graphique sur l'environnement de développement XML de leur choix.
					C'est cette liberté du choix de l'environnement de développement qui est le second bénéfice du format XML pour le développement de ces interfaces graphiques.
                    <br />
                    Il est même possible, en théorie, de lui affecter une page de style XSLT.
                </p>
                <p>Un désavantage, cependant, est que par la séparation de la partie logique de la manière présenté ci-dessus, peut sûrement causer des augmentations des ressources utilisées.</p>
            </div>
            <div class="subChapter">
                <h3>1.2. Buts principaux</h3>
                <p>
                    1) Etre simple à utiliser.
                    <br />
                    2) Etre utilisable indépendamment des bibliothèques graphiques utilisées (swing, awt, swt, ...)
                    <br />
                    3) Etre relativement rapide.
                </p>
            </div>
        </div>
        <div class="chapter">
            <h2>2. Thinlet</h2>
            <div class="subChapter">
                <h3>2.1. Introduction</h3>
                <p>
                    Les Thinlets respectent scrupuleusement les buts principaux énoncés dans les généralités.
                    <br />
                    Elles sont très rapides et simples à utiliser. Pour chaque composant, une ligne XML suffit ; plus ou moins longue, celle-ci décrit le composant en question.
                    <img src="./images/screenshot3.png" alt="screenshot" />
                </p>
                <p>Par exemple :</p>
                <textarea name="code" class="xml">
                    &lt;?xml version="1.0" encoding="UTF-8" ?&gt;
                    <button name="b_finddialog" text="Search" tooltip="Search..." icon="/icons/find.gif" mnemonic="1" action="ShowDialog" />
                    ...
                </textarea>
                <p>Qui correspondrait en Java à :</p>
                <textarea name="code" class="java">...
					JButton b_finddialog = new JButton("Search");
					b_finddialog.setTooltips("Search...");
					b_finddialog.setIcon(new IconImage("/icons/find.gif"));
					b_finddialog.setMnemonic("1");
					b_finddialog.addActionListener(new java.awt.event.ActionListener(){
					public void actionPerformed(java.awt.event.ActionEvent evt){
					showDialog();
					}
					});</textarea>
                <p>Il est évident qu'une seule ligne XML est plus rapide à taper que les 7-8 lignes Java.</p>
                <p>Thinlet permet, de plus, d'utiliser le même code Java pour une application ou pour une applet ; ceci sera entrevu dans le tutorial ci-dessous.</p>
            </div>
            <div class="subChapter">
                <h3>2.2. Simple Tutorial</h3>
                <p>
                    Dans ce petit tutorial, il vous sera montré comment réaliser un calculateur graphique permettant d'additionner deux nombres contenus chacun dans un
                    <i>TextField</i>
                    éditable, et d'afficher le résultat dans un autre
                    <i>TextField</i>
                    lors du clic sur le bouton "=".
                </p>
                <h3>Propriétés de la disposition et des composants</h3>
                <p>
                    Editez un fichier XML (appelé
                    <i>calculator.xml</i>
                    ) qui décrira la hiérarchie et les attributs statiques des composants. Le
                    <i>Panel</i>
                    racine contiendra trois
                    <i>TextFields</i>
                    , un
                    <i>Label</i>
                    "+" et un
                    <i>Button</i>
                    "=". Le gestionnaire de l'événements identifiera les
                    <i>TextFields</i>
                    grâce à leur nom (propriété "name=") et lui ajoutera la méthode spécifiée grâce à la balise "action=".
                </p>
                <textarea name="code" class="xml">
                    &lt;?xml version="1.0" encoding="UTF-8" ?&gt;
                    <panel gap="4" top="4" left="4">
                        <textfield name="number1" columns="4" />
                        <label text="+" />
                        <textfield name="number2" columns="4" />
                        <button text="=" action="calculate(number1.text, number2.text, result)" />
                        <textfield name="result" editable="false" />
                    </panel>
                </textarea>
                <p>Ce qui nous donne visuellement :</p>
                <img src="./images/calculator.png" alt="calculator" />
                <h3>Code Java (Applet ou application)</h3>
                <p>
                    Editer un fichier Java (appelé
                    <i>Calculator.java</i>
                    ) contenant la classe
                    <i>Calculator</i>
                    héritant de la classe
                    <i>Thinlet</i>
                    .
                    <br />
                    Une instance de
                    <i>Calculator</i>
                    lira le fichier XML créé ci-dessus et génèrera les instances des composants nécessaires.
                    <br />
                    Le main créera une instance de
                    <i>FrameLauncher</i>
                    qui génèrera la
                    <i>Frame</i>
                    Java composée des composants de la classe
                    <i>Calculator</i>
                    .
                </p>
                <textarea name="code" class="java">package thinlet.examples.calculator;
					import thinlet.*;
					public class Calculator extends Thinlet {
					public Calculator() {
					try {
					add(parse("calculator.xml"));
					} catch (Exception exc) { exc.printStackTrace(); }
					}
					public static void main(String[] args) {
					new FrameLauncher("Calculator", new Calculator(), 320, 240);
					}</textarea>
                <h3>Gestionnaire d'évènement</h3>
                <p>
                    Compléter ensuite
                    <i>Calculator.java</i>
                    avec la méthode
                    <i>calculate</i>
                    qui fait la somme des deux nombres tapés dans les
                    <i>TextFields</i>
                    et met à jour le
                    <i>TextField</i>
                    nommé
                    <i>result</i>
                    .
                </p>
                <textarea name="code" class="java">public void calculate(String number1, String number2, Object result) {
					try {
					int i1 = Integer.parseInt(number1);
					int i2 = Integer.parseInt(number2);
					setString(result, "text", String.valueOf(i1 + i2));
					} catch (NumberFormatException nfe) {
					getToolkit().beep();
					}</textarea>
                <h3>Appel de l'Applet</h3>
                <p>
                    Utiliser la fonction
                    <i>thinlet.AppletLauncher</i>
                    pour charger le composant Thinlet.
                    <br />
                    Préciser le chemin de la classe du composant Thinlet en paramètre.
                </p>
                <textarea name="code" class="xml">
                    <applet code="thinlet.AppletLauncher" archive="calculator.jar" width="320" height="320">
                        <param name="class" value="thinlet.examples.calculator.Calculator" />
                    </applet>
                </textarea>
                <h3>Compilation et lancement</h3>
                <p>
                    Compilez la source de
                    <i>Calculator.java</i>
                    (ex :
                    <i>javac thinlet/examples/calculator/Calculator.java</i>
                    )
                    <br />
                    Lancez-le (ex :
                    <i>java thinlet.examples.calculator.Calculator</i>
                    ).
                </p>
                <p>
                    Pour l'Applet, compilez l'AppletLaucher (ex :
                    <i>javac thinlet/AppletLauncher.java</i>
                    ) et créez un fichier jar incluant les fichiers :
                </p>
                <ul>
                    <li>
                        <i>thinlet/examples/calculator/Calculator.class</i>
                        ,
                    </li>
                    <li>
                        <i>thinlet/*.class</i>
                        ,
                    </li>
                    <li>
                        <i>thinlet/examples/calculator/calculator.xml</i>
                    </li>
                </ul>
                (ex :
                <i>jar cvfM calculator.jar thinlet/examples/calculator/Calculator.class thinlet/*.class thinlet/examples/calculator/calculator.xml</i>
                )
            </div>
            <div class="subChapter">
                <h3>2.3. Possibilités</h3>
                <p>
                    Cet Applet de démonstration illustre parfaitement les possibilités des Thinlets.
                    <br />
                    Cliquez dessus pour tester les possiblités accessibles.
                </p>
                <!-- APPLET JAVA
				<applet archive="data/resources/628/files/demo.jar" code="thinlet.AppletLauncher" height="320" width="320" />
				-->
                <p>Sources de la démonstration :</p>
                <ul>
                    <li>
                        <a href="http://www.labo-sun.com/data/resources/628/files/Demo.java" target="_blank">Demo.java</a>
                    </li>
                    <li>
                        <a href="http://www.labo-sun.com/data/resources/628/files/Demo.xml" target="_blank">Demo.xml</a>
                    </li>
                    <li>
                        <a href="http://www.labo-sun.com/data/resources/628/files/Dialog.xml" target="_blank">Dialog.xml</a>
                    </li>
                </ul>
                <h3>2.4. Documentation</h3>
                <p>
                    API :
                    <a href="http://thinlet.sourceforge.net/api.html" target="_blank">http://thinlet.sourceforge.net/api.html</a>
                    <br />
                    Applications et démo :
                    <a href="http://thinlet.sourceforge.net/showcase.html" target="_blank">http://thinlet.sourceforge.net/showcase.html</a>
                </p>
            </div>
        </div>
        <div class="chapter">
            <h2>3. SwiXml</h2>
            <div class="subChapter">
                <h3>3.1. Introduction</h3>
                <img src="./images/swixmlbig.gif" alt="swixmlbig" />
                <p>Tout comme les Thinlets, le SwiXml respecte les buts principaux énoncés dans les généralités, excepté le second. Le SwiXml est extrêmement lié au swing java. Certes restrictif, il a cependant ses avantages :</p>
                <p />
                <ul>
                    <li>Les programmeurs ayant une bonne connaissance des bibliothèques swing peuvent directement écrire leur fichier de description XML. Tous les noms employés sont ceux des classes et des méthodes du swing Java. Il n'y a donc pas de vocabulaire spécifique à apprendre.</li>
                    <li>Il est très rapide, car la lecture du fichier de description XML définit directement les classes swing à instancier.</li>
                    <li>Il est extrêmement petit ; le fichier jar est de 40ko et supporte la grande majorité des éléments swing.</li>
                </ul>
                <p>
                    Tous comme les Thinlets, elles sont très rapides et très simple à utiliser. Pour chaque composant, une ligne XML suffit.
                    <br />
                    Prenons le même exemple que précédemment :
                </p>
                <textarea name="code" class="xml">
                    ...
                    <button id="b_finddialog" text="Search" tooltiptext="Search..." icon="/icons/find.gif" mnemonic="1" action="ShowDialog" />
                    ...
                </textarea>
                <p>Qui correspondrait en java à :</p>
                <textarea name="code" class="java">...
					JButton b_finddialog = new JButton("Search");
					b_finddialog.setTooltips("Search...");
					b_finddialog.setIcon(new IconImage("/icons/find.gif");
					b_finddialog.setMnemonic("1");
					b_finddialog.addActionListener(new java.awt.event.ActionListener(){
					public void actionPerformed(java.awt.event.ActionEvent evt){
					showDialog();
					}
					});
					...</textarea>
                <p>Il n'y a certes pas grande différence sur une seule ligne d'exemple, mais sur une page entière de description SwiXml, la proximité du vocabulaire avec celui du swing n'est que profitable.</p>
            </div>
            <div class="subChapter">
                <h3>3.2. Exemple simple</h3>
                <p>Petit exemple d'une page HMTL chargeant un élément SwiXml :</p>
                <textarea name="code" class="html">
                    <applet code="MyClass" archive="/jars/swixml.jar,/jars/jdom.jar,/jars/crimson.jar" width="100%" height="100%">
                        <param name="xml" value="/xml/gui.xml" />
                    </applet>
                </textarea>
                <p>
                    L'Applet requiert un fichier XML de description (dans l'exemple, le fichier gui.xml est requis).
                    <br />
                    Le contenu du fichier de description définit entièrement l'interface graphique.
                    <br />
                    Cependant il n'y a, ici, aucunement besoin de code Java pour afficher l'interface graphique. Le code Java ne servirait ici que pour une gestion d'évènement, liés au bouton par exemple.
                </p>
                <p>Fichier Descripteur XML minimum :</p>
                <textarea name="code" class="xml">
                    &lt;?xml version="1.0" encoding="UTF-8" ?&gt;
                    <frame>
                        <panel background="6699cc" constraints="BorderLayout.CENTER">
                            <label text="Hello Swinglet" />
                            <button text="OK" tooltiptext="Press OK" />
                        </panel>
                    </frame>
                </textarea>
                <p>
                    Interface Graphique :
                    <br />
                    <img src="./images/minswinglet.gif" alt="minswinglet" />
                </p>
            </div>
            <div class="subChapter">
                <h3>3.3. Possibilités</h3>
                <p>
                    Le SwiXml permet, tout comme les Thinlet, la création d'interface graphique. Mais, comme on l'a vu dans l'exemple de code ci-dessus, il n'est pas nécessaire d'avoir un quelconque code java, s'il n'y a pas besoin de gérer les évènements.
                    <br />
                    Par extension, cela permet de générer dynamiquement les interfaces graphiques java sous forme d'Applet.
                    <br />
                    Le site
                    <a href="http://www.carlsbadcubes.com/swixdemo.html" target="_blank">http://www.carlsbadcubes.com/swixdemo.htm</a>
                    illustre bien cette fonctionnalité (Attention : Lors de l'affichage IE, les exemples fournis contiennent les -/+ de la représentation de l'arborescence. Pour les tester il faut donc afficher la source de ces exemples et copier celle-ci dans la zone de texte du formulaire).
                </p>
            </div>
            <div class="subChapter">
                <h3>3.4. Documentation</h3>
                <p>
                    Tag XML :
                    <a href="http://www.swixml.org/tagdocs/index.html" target="_blank">http://www.swixml.org/tagdocs/index.html</a>
                    <br />
                    API :
                    <a href="http://www.swixml.org/apidocs/index.html" target="_blank">http://www.swixml.org/apidocs/index.html</a>
                </p>
            </div>
        </div>
        <div class="chapter">
            <h2>Conclusion</h2>
            <p>Vous avez pu découvrir au long de cet article cette nouvelle technologie de création d'interface graphique Java grâce au langage XML et vous avez dû remarquer, sans doute, la rapidité de mise en oeuvre grâce à une telle technologie.</p>
            <p>Bien que toujours en cours de développement, cette technologie est pour le moins prometteuse et bénéficie de plus de licences libres*, restant dans le même esprit que les technologies Java et ses dérivées, qui permettent à tout utilisateur d'utiliser gratuitement ces technologies et d'accéder à leurs codes sources.</p>
            <p>* licences libres :</p>
            <ul>
                <li>
                    Thinlet :
                    <a href="http://www.gnu.org/copyleft/lesser.html%22" target="_blank">LGPL.</a>
                </li>
                <li>
                    SwiXml :
                    <a href="http://www.swixml.org/license.txt" target="_blank">SwiXml Licence</a>
                    de type Apache Open source.
                </li>
            </ul>
        </div>
    </body>
</html>

